<!DOCTYPE html>
<html id="stylus" class="normal-layout">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title i18n="styleManager"></title>
  <link href="css/icons.ttf" rel="preload" as="font" crossorigin="anonymous">
  <%= htmlWebpackPlugin.tags.headTags %>

  <template data-id="style">
    <div class="entry">
      <h2 class="style-name">
        <a class="style-name-link">
          &nbsp;
          <span class="style-info" data-type="version"></span>
        </a>
        <a target="_blank" class="homepage icon"><i class=i-external></i></a>
      </h2>
      <p class="applies-to">
        <span class="style-info" data-type="age"></span>.
        <label i18n="genericSize">:</label><span class="style-info" data-type="size"></span>.
        <label i18n="appliesDisplay"></label>
        <span class="targets"></span>
      </p>
      <p class="actions">
        <a class="style-edit-link">
          <button i18n="editStyleLabel" tabindex="-1"></button>
        </a>
        <button class="enable" i18n="enableStyleLabel"></button>
        <button class="disable" i18n="disableStyleLabel"></button>
        <button class="delete" i18n="deleteStyleLabel"></button>
        <button class="check-update" i18n="checkForUpdate"></button>
        <button class="update" i18n="installUpdate" hidden></button>
        <button class="configure-usercss" i18n="configureStyle"></button>
        <span class="update-note"></span>
      </p>
    </div>
  </template>

  <template data-id="styleNewUI">
    <div class="entry">
      <h2 class="style-name">
        <input type="checkbox" i18n="title:toggleStyle">
        <a class="style-name-link">
          &nbsp;
          <span class="style-info" data-type="version"></span>
        </a>
        <a target="_blank" class="homepage icon" tabindex="0"><i class=i-external></i></a>
      </h2>
      <p class="actions">
        <a class="delete" i18n="title:deleteStyleLabel" tabindex="0">
          <i class=i-close></i>
        </a>
      </p>
      <p class="style-info" data-type="size"></p>
      <p class="style-info" data-type="age"></p>
      <div class="applies-to">
        <a class="expander" tabindex="0"><i>▼</i></a>
        <div class="targets"></div>
      </div>
    </div>
  </template>

  <template data-id="configureIcon">
    <a class="configure-usercss" i18n="title:configureStyle" tabindex="0">
      <i class=i-config></i>
    </a>
  </template>

  <template data-id="updaterIcons">
    <span class="updater-icons flex">
      <a class="check-update" i18n="title:checkForUpdate" tabindex="0">
        <i class=i-update-check></i>
      </a>
      <a class="update" i18n="title:installUpdate" tabindex="0">
        <i class=i-install></i>
      </a>
      <span class="up-to-date" i18n="title:updateCheckSucceededNoUpdate">
        <i class=i-check1></i>
      </span>
      <span class="updated" i18n="title:updateCompleted">
        <i class=i-check2></i>
      </span>
      <span class="update-note"></span>
    </span>
  </template>

  <template data-id="appliesToTarget">
    <span class="target"></span>
  </template>

  <template data-id="appliesToSeparator">
    <span class="sep">, </span>
  </template>

  <template data-id="appliesToEverything">
    <span class="target" i18n="appliesToEverything"></span>
  </template>

  <template data-id="extraAppliesTo">
    <details class="applies-to-extra">
      <summary class="applies-to-extra-expander" i18n="appliesDisplayTruncatedSuffix"></summary>
    </details>
  </template>

<template data-id="body"> <!-- https://crbug.com/1288447 -->

<div id="header" class="dvh100">
  <h1 i18n="styleManager"></h1>

  <label id="disableAll-label" i18n="data-on:disableAllStyles, data-off:disableAllStylesOff">
    <input id="disableAll" type="checkbox">
  </label>

  <div id="manage-settings">
    <div class="settings-column" id="filters">
      <div id="stats">
        <span></span>
        <a tabindex="0" i18n="title:genericResetLabel">
          <i class=i-close></i>
        </a>
      </div>

      <div class="filter-selection">
        <label>
          <input id="manage.onlyEnabled" type="checkbox"
                 data-filter=".enabled"
                 data-filter-hide=".disabled">
        </label>
        <div class="select-wrapper">
          <select id="manage.onlyEnabled.invert" class="fit-width">
            <option i18n="manageOnlyEnabled" value="false"></option>
            <option i18n="manageOnlyDisabled" value="true"></option>
          </select>
        </div>
      </div>

      <div class="filter-selection">
        <label>
          <input id="manage.onlyLocal" type="checkbox"
                 data-filter=":not(.updatable):not(.update-done)"
                 data-filter-hide=".updatable, .update-done">
        </label>
        <div class="select-wrapper">
          <select id="manage.onlyLocal.invert" i18n="title:manageOnlyLocalTooltip" class="fit-width">
            <option i18n="manageOnlyLocal" value="false"></option>
            <option i18n="manageOnlyExternal" value="true"></option>
          </select>
        </div>
      </div>

      <div class="filter-selection">
        <label>
          <input id="manage.onlyUsercss" type="checkbox"
                 data-filter=".usercss"
                 data-filter-hide=":not(.usercss)">
        </label>
        <div class="select-wrapper">
          <select id="manage.onlyUsercss.invert" class="fit-width">
            <option i18n="manageOnlyUsercss" value="false"></option>
            <option i18n="manageOnlyNonUsercss" value="true"></option>
          </select>
        </div>
      </div>

      <div class="filter-selection">
        <label id="only-updates" i18n="+manageOnlyUpdates" class="hidden">
          <input type="checkbox"
                 data-filter=".can-update, .update-problem, .update-done"
                 data-filter-hide=":not(.updatable):not(.update-done),
                                   .no-update:not(.update-problem),
                                   .updatable:not(.can-update):not(.update-problem):not(.update-done)">
        </label>
      </div>

      <div id="search-wrapper">
          <input id="search" type="search" i18n="placeholder:search" spellcheck="false"
                 data-filter=":not(.not-matching)"
                 data-filter-hide=".not-matching">
          <div class="select-wrapper">
            <select id="manage.searchMode" class="fit-width">
              <option i18n="searchStylesName" value="name"></option>
              <option i18n="searchStylesMeta" value="meta" selected></option>
              <option i18n="searchStylesCode" value="code"></option>
              <option i18n="searchStylesMatchUrl" value="url"></option>
              <option i18n="searchStylesAll" value="all"></option>
            </select>
          </div>
          <a id="search-help" tabindex="0" class="icon" i18n="title:searchStylesHelp">
            <i class=i-info></i>
          </a>
        </div>

      <div id="sort-wrapper">
        <div class="select-wrapper" i18n="title:sortLabel">
          <select id="manage.newUI.sort"></select>
        </div>
        <a id="sorter-help" tabindex="0" class="icon" data-cmd="note" i18n="title:sortStylesHelp">
          <i class=i-info></i>
        </a>
      </div>
    </div>

    <div class="settings-column" id="actions">
      <details data-pref="manage.actions.expanded">
        <summary></summary>
      </details>
      <main class="flex wrap center-items">
        <button id="check-all-updates" i18n="title:checkAllUpdates" class="icon">
          <i class=i-update-check></i>
          <span id="update-progress"></span>
        </button>
        <button id="update-history-button" i18n="title:genericHistoryLabel" class="icon">
          <i class=i-log></i>
        </button>
        <button id="injection-order-button" i18n="title:styleInjectionOrder" class="icon">
          <i class=i-reorder></i>
        </button>
        <button id="manage-options-button" i18n="title:openOptions" class="icon">
          <svg class="hollow-gear" viewBox="0 0 20 20" stroke-width="1.25px">
            <text y="100%">⚙</text>
          </svg>
        </button>

        <a id="add-style" tabindex="-1" href="edit.html" class="icon">
          <button i18n="title:addStyleLabel" class="icon">
            <i class=i-plus></i>
          </button>
        </a>
        <label id="add-style-as-usercss-wrapper" i18n="title:optionsAdvancedNewStyleAsUsercss">
          <input type="checkbox" id="newStyleAsUsercss">
          <i class=i-usercss></i>
          <a id="usercss-wiki"
             class="icon"
             href="https://github.com/openstyles/stylus/wiki/Usercss"
             i18n="title:externalUsercssDocument">
            <i class=i-external></i>
          </a>
        </label>

        <div id="update-all">
          <template data-id="updateAll">
            <button id="apply-all-updates" i18n="applyAllUpdates"></button>
            <span id="update-all-no-updates" i18n="updateAllCheckSucceededNoUpdate"></span>
            <button id="check-all-updates-force" i18n="checkAllUpdatesForce"></button>
          </template>
        </div>


        <div id="backup" class="flex wrap center-items">
          <button id="sync-styles" class="icon flex center-items" i18n="title:optionsCustomizeSync">
            <i class=i-cloud></i>
          </button>
          <button id="import" i18n="importLabel"></button>
          <span class="split-btn">
            <button id="export" i18n="exportLabel"></button
            ><button class="split-btn-pedal" i18n="menu-compat:exportCompatible"></button>
          </span>
          <p></p>
        </div>
      </main>
    </div>

    <div class="settings-column" id="backup-hint">
      <details data-pref="manage.backup.expanded">
        <summary></summary>
        <main i18n="html:backupReminder"></main>
      </details>
    </div>

    <div class="settings-column" id="links">
      <details data-pref="manage.links.expanded">
        <summary></summary>
        <main>
          <a href="https://userstyles.world/explore" target="_blank" i18n="linkGetShareStyles"></a>
          <a href="https://uso.kkx.one/browse/styles" target="_blank" i18n="linkGetStyles"
             style="--filter: grayscale(1) brightness(2)"></a>
          <a href="https://github.com/openstyles/stylus/wiki" target="_blank" i18n="linkGetHelp"></a>
          <a href="https://github.com/openstyles/stylus" target="_blank">GitHub</a>
          <a href="https://explore.transifex.com/github-7/Stylus/" target="_blank" i18n="linkTranslate"></a>
        </main>
      </details>
    </div>
  </div>

  <div id="header-resizer" i18n="title:headerResizerHint"></div>
</div>

<div id="installed"></div>

</template>
</head>

<body id="stylus-manage" i18n="dragndrop-hint:dragDropMessage">
  <%= htmlWebpackPlugin.tags.bodyTags %>
</body>
</html>
